<template>
  <view class="proposal-options">
    <view v-for="(option, index) in options" :key="index" class="option-item" @click="selectProposal(option.type)">
      <view class="option-radio" :class="{ checked: option.type === proposalType }" />
      <view class="option-label">{{ option.label }}</view>
    </view>
  </view>
</template>

<script setup lang="ts">
import type { DishwasherController } from '@/controller/Dishwasher/definition'
import type { ProposalType } from '@/controller/Dishwasher/Learning/constants'
import type { ProposalOption } from '../constants'

const props = defineProps<{
  control: DishwasherController.Control
  options: ProposalOption[]
  proposalType: ProposalType | null
}>()
const emit = defineEmits<{
  (e: 'update:proposal-type', type: ProposalType): void
  (e: 'change', type: ProposalType): void
}>()

/**
 * 选择方案
 */
function selectProposal(type: ProposalType) {
  emit('update:proposal-type', type)
  emit('change', type)
}
</script>

<style scoped lang="less">
.proposal-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40rpx;
}
.option-item {
  display: flex;
  align-items: center;
  line-height: 40rpx;
}
.option-radio {
  flex-shrink: 0;
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
  border: 2rpx solid var(--primary-color);
  margin-right: 20rpx;
  position: relative;
  &.checked::after {
    display: block;
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 24rpx;
    height: 24rpx;
    border-radius: 50%;
    background-color: var(--primary-color);
  }
}
.option-label {
  font-weight: 500;
  font-size: 28rpx;
  color: var(--dark-color);
}
</style>
